<template>
	<div id="app">
		<div class="box">
			<div class="box_wrapper">
				<h1>UNI-ADMIN</h1>
				<el-form label-width="80px">
					<el-input v-model="username" placeholder="请输入用户名"></el-input>
					<el-input v-model="password" placeholder="请输入密码"></el-input>
				</el-form>
			</div>
			<el-button type="success" @click="onClick">立即登录</el-button>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			username: '', // 输入框
			password: '' // 输入框
		};
	},
	mounted() {},
	methods: {
		onClick() {
			this.$axios
				.post('http://ceshi5.dishait.cn/admin/login', {
					username: this.username,
					password: this.password
				})
				.then(res => {
					console.log(res);
					let token = res.data.data.token;
					window.localStorage.setItem('token', token);
					this.$message('登陆成功');
					setTimeout(() => {
						this.$router.push('/');
					}, 3000);
				})
				.catch(error => {
					this.$message.error('登录失败');
					console.log(error);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}

#app {
	.box {
		width: 450px;
		height: 320px;
		/*background-color: pink;*/
		margin: 150px auto;
		padding: 20px;
		border: 2px solid rgb(153, 170, 92);
		background: linear-gradient(135deg, #dad3da 0%, #ece8e9 100%);

		.box_wrapper {
			text-align: center;

			h1 {
				width: 100%;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid black;
			}

			.el-form {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				line-height: 80px;
				margin-top: 20px;
			}
		}

		.el-button {
			width: 100%;
			margin-top: 15px;
			height: 40px;
			line-height: 40px;
		}
	}
}
</style>
